<template>
  <k-view class="page-footer">
    <k-view class="block-view flex-view">
      <k-view class="block-item" v-for="item in blockItemList" :key="item.id">
        <k-view :class="['item-image', item.className]"></k-view>
        <k-text class="item-title">{{ item.title }}</k-text>
        <k-text class="item-sub-title">{{ item.subTitle }}</k-text>
      </k-view>
    </k-view>
    <k-view class="slogan-view">
      <k-view class="slogan-title">
        <k-text class="slogan-line"></k-text>
        <k-text class="slogan-title-text">支持单位</k-text>
        <k-text class="slogan-line"></k-text>
      </k-view>
      <k-text class="slogan-content">中关村国睿金融与产业发展研究会</k-text>
    </k-view>
    <fee-helper
      openTheme
      isFull
      riskType="4"
      company="xr"
      showType="risk"
      fromProductType="shapeExcavate"
    />
  </k-view>
</template>

<script>
import Apis from '@king-fisher/apis';

const { Toast } = Apis;

export default {
  data() {
    return {
      theme: 'light',
      blockItemList: [
        {
          id: 1,
          title: '大数据',
          className: 'dataBIcon',
          subTitle: '基于同花顺iFind海量公司数据',
        },
        {
          id: 2,
          title: '人工智能',
          className: 'artIcon',
          subTitle: '系列算法模型生成初步诊断结果',
        },
        {
          id: 3,
          title: '专家力量',
          className: 'profIcon',
          subTitle: '专家打分、指标解读、报告出具',
        },
      ],
      disclaimers:
        '免责声明：本信息是由同花顺金融研究中心与中关村国睿金融与产业发展研究会共同提供，仅供参考，力求但不保证数据的完全准确，如有错漏请以中国证监会指定上市公司信息披露媒体为准。用户查看或依据这些内容所进行的任何行为造成的风险和结果都请自行负责，与同花顺平台无关。',
    };
  },
  methods: {
    handleTap() {
      Toast.show('handleTap');
    },
  },
};
</script>

<style lang="less">
.page-footer {
  width: 100%;
  padding-top: 44px;
  .flex-view {
    display: flex;
    justify-content: space-around;
    align-items: center;
    .block-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
  .item-image {
    width: 80px;
    height: 80px;
    &.dataBIcon {
      background-image: url('@/assets/index/dataB-icon.png');
      background-size: 80px 80px;
    }
    &.artIcon {
      background-image: url('@/assets/index/art-icon.png');
      background-size: 80px 80px;
    }
    &.profIcon {
      background-image: url('@/assets/index/prof-icon.png');
      background-size: 80px 80px;
    }
  }
  .item-title {
    margin-top: 4px;
    font-size: 28px;
    color: rgba(0, 0, 0, 0.2);
    font-weight: 500;
  }
  .item-sub-title {
    padding: 0 16px;
    margin-top: 14px;
    font-size: 24px;
    color: rgba(0, 0, 0, 0.2);
    font-weight: 400;
    text-align: center;
  }

  .slogan-view {
    margin-top: 32px;
    padding: 0 20px;
    .slogan-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .slogan-title-text {
        color: rgba(0, 0, 0, 0.2);
        font-size: 28px;
        font-weight: 500;
      }
      .slogan-line {
        width: calc(50vw - 112px);
        height: 1px;
        background-color: rgba(30, 30, 30, 0.1);
      }
    }
    .slogan-content {
      margin-top: 16px;
      text-align: center;
      font-size: 24px;
      color: rgba(0, 0, 0, 0.2);
      font-weight: 400;
    }
  }

  .disclaimers {
    margin-top: 32px;
    padding: 0 20px 60px 20px;
    .disclaimers-text {
      font-size: 24px;
      color: rgba(0, 0, 0, 0.2);
      font-weight: 400;
    }
  }
}
[theme-mode='black'] {
  .page-footer {
    background: #0f0f0f;
    .item-image {
      width: 80px;
      height: 80px;
      &.dataBIcon {
        background-image: url('@/assets/index/dataB-icon-dark.png');
        background-size: 80px 80px;
      }
      &.artIcon {
        background-image: url('@/assets/index/art-icon-dark.png');
        background-size: 80px 80px;
      }
      &.profIcon {
        background-image: url('@/assets/index/prof-icon-dark.png');
        background-size: 80px 80px;
      }
    }
    .item-title {
      color: rgba(255, 255, 255, 0.2);
    }
    .item-sub-title {
      color: rgba(255, 255, 255, 0.2);
    }
    .slogan-view {
      .slogan-title {
        .slogan-title-text {
          color: rgba(255, 255, 255, 0.2);
        }
        .slogan-line {
          background-color: #e1e1e1;
          opacity: 0.2;
        }
      }
      .slogan-content {
        color: rgba(255, 255, 255, 0.2);
      }
    }

    .disclaimers {
      .disclaimers-text {
        color: rgba(255, 255, 255, 0.2);
      }
    }
  }
}
</style>
